<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<link href="https://cdn.bootcss.com/mapbox-gl/0.45.0-beta.1/mapbox-gl.css" rel="stylesheet">
	<style type="text/css">
		body,
		html {
			margin: 0;
			padding: 0;
		}
		#map1 {
			height: 460px;
			height: 60vh;
			float: left;
			margin-right: 15px;
			width: 24%;
			/*background: #000822;*/
			background-image: url(img/left.png);
			background-repeat: no-repeat;
			background-size: 40% 38vh;
		}

		#map2 {
			height: 460px;
			height: 60vh;
			float: right;
			margin-left: 15px;
			width: 24%;
			/*background: #000822;*/
			background-image: url(img/right.png);
			background-position: right 4vh;
		    background-repeat: no-repeat;
		    background-size: 45% 45vh;
		}

		#map {
			float: left;
		}

		#title {
			/*height: 60px;*/
			width: 100%;
			height: 10vh;
			/*color: #c39f61;*/
			text-align: center;
			/*line-height: 60px;*/
			font-weight: bold;
			font-size: 24px;
			/*background: #000822;*/
			/*margin-bottom: 15px;*/
		}

		#map1-a,
		#map1-b,
		#map2-a,
		#map2-b {
			width: 100%;
			height: 225px;
			height: 30vh;
			/*background: #000822;*/

		}
		#map1-a,
		#map2-a {
			/*margin-bottom: 10px;*/
		}

		#map3 {
			width: 100%;
			/*background: #000822;*/
			/*margin-top: 15px;*/
			height: 230px;
			height: 30vh;
			float: left;
			/*margin-bottom: 40px;*/
			background-image: url(img/bottom.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			/*padding-bottom: 20px;*/
		}

		#map3-a,
		#map3-c {
			height: 230px;
			height: 30vh;
			float: left;
			margin-right: 15px;
			width: 24%;
			/*background: #000822;*/
		}

		#map3-c {
			float: right;
			margin-right: 0;
		}

		#map3-b {
			height: 230px;
			height: 30vh;
			float: left;
			margin-right: 15px;
			width: 49%;
			/*background: #000822;*/

		}
		body{
			/*background-color: #000;
			background-image: url(img/bggg.png);
			background-repeat: no-repeat;
			background-size: 80% 50%;
			background-position: 50% 50%;*/
			background: #000;
			background-image: url('http://pic33.photophoto.cn/20141215/0005018420143031_b.jpg');
		}
		#map1-a{
			/*background-image: url(img/leftTop.png);
			background-repeat: no-repeat;*/
			/*background-size: 100% 100%;*/
		}
		#map1-b{
			/*background-image: url(img/leftBottom.png);*/
			/*background-repeat: no-repeat;*/
			/*background-size: 100% 100%;*/
		}
		.chartName{
			position: absolute;
			top: 4vh;
			left: 16%;
			color: #00f7fe;
			font-size: 2vh;
		}
		.chartName2{
			position: absolute;
			top: 1vh;
			right: 14%;
			color: #277bce;
			font-size: 2vh;
		}
	</style>
</head>

<body>
	<div id="title"><img src="img/title.png" style="width: 45%;"/></div>
	<!--<div style="position:absolute;top:30px;left: 40px;color:  white;">惠民总人口数 10,000,000</div>-->
	<!--<img src="./logo.jpg" style="width:100px;height:50px;position: absolute;right: 30px;top: 5px;" alt="">-->
	<div id="map1">
	
		<div style="position: relative;">
			<div class="chartName">地区概况</div>
			<div id="map1-a">
			</div>
		</div>
		<div style="position: relative;">
			<div class="chartName" style="color: #e6d69e;">地区增幅</div>
			<div id="map1-b">
			</div>
		</div>
		
	</div>
	<div id='map' style='width: 49%; height:60vh;'></div>
	<div id="map2">
		<div style="position: relative;">
			<div class="chartName2">福州市Top5</div>
			<div id="map2-a">
			</div>	
		</div>
		<div style="position: relative;">
			<div class="chartName2" style="color: #a65380;">项目与地区Top5</div>
			<div id="map2-b">
			</div>
		</div>
		
	</div>
	<div id="map3">
		<div id="map3-a">
		</div>
		<div id="map3-b">
		</div>
		<div id="map3-c">
		</div>
	</div>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/echarts.js"></script>
	<script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>
	<script src="https://cdn.bootcss.com/mapbox-gl/0.45.0-beta.1/mapbox-gl.js"></script>
	<!-- <script src="js/option.js" type="text/javascript" charset="utf-8"></script> -->
	<script src="js/json.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/leftTop.js"></script>
	<script src="js/leftCenter.js"></script>
	<script type="text/javascript" src="js/leftbottom.js" ></script>
	<script src="js/rightCenter.js" ></script>
	<script src="js/centerBottom.js"></script>
	<script src="js/rightTop.js"></script>
	<!--<script src="js/rightBottom.js"></script>-->
	<script src="js/setOption.js"></script>

	<script>
		mapboxgl.accessToken = 'pk.eyJ1IjoiY291bGlzIiwiYSI6ImNqZ3Z3OXJ5ODE0cDQyeG52bzJ0MjJvdjMifQ.ZkKWpkDmibMo-dUDjAqYXQ';

		$.getJSON('css/fujian11.json', function (data) {
			$.post(baseurl+"city/listall",function(result){
			    /*console.log(result)*/
                var geoCoordMap = {};
                var dataPoint = [];
                for(var i=0;i<result.length;i++){
			    	geoCoordMap[result[i].name] = [result[i].precision,result[i].latitude]
			    	dataPoint.push({'name': result[i].name,'value': result[i].money})
                };
			    // console.log(dataPoint);
			    var convertData = function (data) {
					var res = [];
					for (var i = 0; i < data.length; i++) {
						var geoCoord = geoCoordMap[data[i].name];
						if (geoCoord) {
							res.push({
								name: data[i].name,
								value: geoCoord.concat(data[i].value)
							});
						}
					}
					return res;
				};
				
				echarts.registerMap('fujian', data);
				var chart = echarts.init(document.getElementById('map'));
				// console.log(convertData(dataPoint));
				chart.setOption({
					/*title: {
						left: 'center',
						text: '全市惠民资金发放总金额 130,000,000',
						textStyle: {
							color: '#fff',
							fontWeight: 'normal'
						}
					},*/
					geo3D: {
						show: true,
						map: 'fujian',
						regionHeight: 0,
						boxHeight: 10,
						groundPlane: {
							show: false,
							color: '#aaa',
						},
						itemStyle: {
							areaColor: '#000822',
							opacity: 1,
							borderWidth: 0.4,
							borderColor: '#03f1fe'
						}/*,
						viewControl:{
							autoRotate:true
						}*/
					},
					tooltip: {
						show: true,
						formatter:(params) => {
							console.log(params)
							var monSum = 0;
							if(params.value[2]){
								monSum = params.value[2];
							}else{
								monSum = params.value;
								
							};
							let data = "地区:"+params.name + "<br/>"+"发放总额:"+ monSum+"元"+"<br/>"/*+"地理坐标:[" + params.value[0]+","+params.value[1] +"]"*/;
						   return data;
						}
					},
					visualMap: [{
						show:'false',
						max: 60000000,
						min: 60000,
						seriesIndex: 0,
         				text: ['bar3D'],
						calculable: true,
						realtime: false,
						inRange: {
							color: [ '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
						},
						outOfRange: {
							colorAlpha: 0
						}
					}, 
					{type: 'continuous',
			         seriesIndex: 1,
			         text: ['map3D'],
			         left: 'right',
			         max: 9000000,
			         min:10,
			         calculable: true,
			         inRange: {
			             color: ['#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
			             
			         },
			         range: [10000,9000000],
			         outOfRange:{
			         	colorAlpha: 0
			         }
			     }],
					series: [
						{
							data: convertData(dataPoint),
							name: 'bar3D',
							type: "bar3D",
							coordinateSystem: 'geo3D',
							barSize: 0.5, //柱子粗细
							shading: 'realistic',
							opacity: 1,
							bevelSize: 0.5,
							label: {
								show: false,
								formatter: '{b}'
							}
						},{
							name: 'map3D',
							type: "map3D",
			                map: 'fujian',
			                regionHeight: 0.5,
						boxHeight: 10,
			                itemStyle:{
			                    emphasis:{label:{show:true}}
			                },
			                data:[
			                	{name: '长乐区', value: 2},
			                    {name: '福清市', value: 731449},
			                    {name: '仓山区', value: 6553255},
			                    {name: '连江县', value: 2949131},
			                    {name: '闽侯县', value: 38041430},
			                    {name: '闽清县', value: 5187582},
			                    {name: '永泰县', value: 3590347},
			                    {name: '晋安区', value: 917092},
			                    {name: '罗源县', value: 63232300},
			                    {name: '马尾区', value: 19317568},
			                    {name: '平潭县', value: 1917568},
			                    {name: '鼓楼区', value: 1517568},
			                    {name: '台江区', value: 2517568}
			                ]/*,
							viewControl:{
								autoRotate:true
							}*/
						}]
				});

			  });
		});
		
	</script>
</body>

</html>